/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import moment from 'moment';
import { Grid, Table, Button } from '@alifd/next';
import styles from '../OperationPage/components/styles/styles';
import { ApiOfRealtimeMonitorData } from '#/utils/coreApiDefine'

const { Row, Col } = Grid;

export default class CacheData extends Component {
  static displayName = 'CacheData';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      code: '',
      collectedTime: '',
      data: [],
      loading: false
    };
  }

  componentWillMount() {
    this.fetchData();
  }

  fetchData() {
    this.setState({
      loading: true
    })
    ApiOfRealtimeMonitorData(this.props.match.params.code).then(response => {
      const data = response.data
      this.setState({
        code: data.code,
        collectedTime: data.collectedTime,
        data: data.data,
        loading: false
      })
    })
  }

  render() {
    return (
      <div style={styles.infoColumn}>
        <h5 style={styles.infoColumnTitle}>{this.state.code}
          <span style={{marginLeft: '20px' }}>{moment(this.state.collectedTime).format('YYYY-MM-DD HH:mm:ss')}</span>
          <Button onClick={() => this.fetchData()} type="primary" size="small" style={{'marginLeft': '10px'}}>刷新</Button>
        </h5>
        <Table dataSource={this.state.data} hasHeader={true} hasBorder={false} loading={this.state.loading}>
          <Table.Column title="标识符" width={220} dataIndex="code" />
          <Table.Column title="指标名" width={220} dataIndex="name" />
          <Table.Column title="数值" dataIndex="value" />
        </Table>
      </div>
    );
  }
}
